<style lang="scss">
body {
  position: absolute;
}
.box {
  width: 100%;
  height: 100%;
  header {
    width: 100%;
    .div1 {
      display: flex;
      justify-content: space-between;
      .search1 {
        flex: 1;
      }
      .icon1 {
        font-size: 30px;
        margin: 10px;
      }
    }
  }
  main {
    overflow: scroll;
    .list {
      margin-top: 20px;
      margin-left: 10px;
      p {
        margin-top: 40px;
        color: rgb(138, 202, 202);
      }
    }
  }
  .box2 {
    display: flex;
    justify-content: space-between;
    .star {
      flex: 1;
      font-size: 30px;
    }
    .icon2 {
      font-size: 30px;
      margin: 10px;
    }
  }
}
.blue {
  color: rgb(129, 161, 195);
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.commont {
}
.title {
  margin-top: 10px;
}
</style>
<template>
  <div class="mask" v-show="flag">
    <dl style="display: flex">
      <dt>
        <router-link :to="{ name: 'comment' }">
          <img class="img" src="../../images/2.png" alt="" />
        </router-link>
      </dt>
      <dd>
        <textarea name="" id="" cols="30" rows="10">
          小楠楠
        </textarea>
      </dd>
    </dl>
    <dl style="display: flex">
      <dt>
        <router-link :to="{ name: 'comment' }">
          <img class="img" src="../../images/2.png" alt="" />
        </router-link>
      </dt>
      <dd>
        <textarea name="" id="" cols="30" rows="10">
          小楠楠
        </textarea>
      </dd>
    </dl>
    <span @click="guan">X</span>
    <input v-model="newComment" type="text" style="width: 270px; height: 45px" class="commont" />
    <button type="submit" @click="addComment">发布评论</button>
    <h2>评论列表</h2>
    <ul>
      <li style="color: #fff" v-for="(comment, index) in comments" :key="index">{{ comment }}</li>
    </ul>
  </div>
  <div class="box">
    <header>
      <div class="div1">
        <van-icon class="icon1" name="manager" @click="onicon1" />
        <h3 class="title">急寻:面神经炎的治疗方法</h3>
        <van-icon class="icon1" name="flower-o" />
      </div>
    </header>
    <main>
      <div v-if="v" class="list">
        <p>{{ v.name }}</p>
        <div>{{ v.type }}</div>
        <p>[科室]</p>
        <div>{{ v.room }}</div>
        <p>[病症详情]</p>
        <div>{{ v.desc }}</div>
        <p></p>
        <div>{{ v.date }}</div>
        <p>[相关图片]</p>
        <img :src="v.image" alt="" />
      </div>
    </main>
    <div class="box2">
      <van-icon name="star-o" class="star" />
      <van-icon name="comment-o" class="icon2" @click="pinglun" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getDetail } from '@/api'
import { type ListState } from '@/ListState'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { id } = route.params
const flag = ref(false)
console.log(id, '123432')
const v = ref<ListState | null>(null)
// 评论功能
const newComment = ref('')
const comments = ref([])
const addComment = () => {
  if (newComment.value.trim()) {
    comments.value.push(newComment.value.trim())
    newComment.value = ''
  }
}
const getDetailData = async () => {
  try {
    const res = await getDetail(id as string)
    if (res.data.data.item[0].id === id) {
      v.value = res.data.data.item[0]
    } else if (res.data.data.item[1].id === id) {
      v.value = res.data.data.item[1]
    } else {
      v.value = res.data.data.item[2]
    }
  } catch (error) {
    console.error('Error fetching detail:', error)
  }
}
onMounted(getDetailData)
const onicon1 = () => {
  router.push('/my')
}
const pinglun = () => {
  console.log(11)
  flag.value = true
}
const guan = () => {
  flag.value = false
}
</script>

<style scoped>
</style>